<template>
  <div class="hot main-body">
    <h2>
      <i class="iconfont iconhotspot_icon_redian" />
      <em class="blue-text">今日</em>热点 • Hot spot
      <button>查看更多</button>
    </h2>
    <div class="clearfix hot-wrapper">
      <div class="hot-content-left">
        <div class="hot-content-top-list">
          <div>
            <h3>最近火了一种掉进墨水的匡威鞋，热巴还顺便…</h3>
            <p>上周，耐克公司就“Cryptokicks”一词向美国专利和商标局(USPTO)提交了一份申请。具体细节表明，该公司计划宣布倒闭。</p>
          </div>
          <div>
            <h3>最近火了一种掉进墨水的匡威鞋，热巴还顺便…</h3>
            <p>上周，耐克公司就“Cryptokicks”一词向美国专利和商标局(USPTO)提交了一份申请。具体细节表明，该公司计划宣布倒闭。</p>
          </div>
        </div>
        <ul class="hot-content-bottom-list">
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
          <li>今年最最最火的4种单鞋，我不允许你没有！</li>
        </ul>
      </div>
      <div class="hot-content-right">
        <swiper ref="mySwiper" :options="swiperOption">
          <!-- slides -->
          <swiper-slide>I'm Slide 1</swiper-slide>
          <swiper-slide>I'm Slide 2</swiper-slide>
          <swiper-slide>I'm Slide 3</swiper-slide>
          <swiper-slide>I'm Slide 4</swiper-slide>
          <swiper-slide>I'm Slide 5</swiper-slide>
          <swiper-slide>I'm Slide 6</swiper-slide>
          <swiper-slide>I'm Slide 7</swiper-slide>
          <!-- Optional controls -->
          <div slot="pagination" class="swiper-pagination" />
          <div slot="button-prev" class="swiper-button-prev" />
          <div slot="button-next" class="swiper-button-next" />
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Carrousel',
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        autoplay: {
          disableOnInteraction: false, // 用户操作后是否禁止自动循环
          delay: 3000// 自自动循环时间
        }, // 可选选项，自动滑动
        speed: 2000, // 切换速度，即slider自动滑动开始到结束的时间（单位ms）
        loop: true, // 循环切换
        grabCursor: true, // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        // autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
        scrollbar: '.swiper-scrollbar',
        mousewheelControl: true, // 设置为true时，能使用鼠标滚轮控制slide滑动
        observeParents: true, // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
        pagination: {
          el: '.swiper-pagination',
          // type : 'progressbar', //分页器形状
          clickable: true // 点击分页器的指示点分页器会控制Swiper切换
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // console.log('this is current swiper instance object', this.swiper)
    this.swiper.slideTo(3, 1000, false)
  }
}
</script>

<style lang="scss" scoped>
    @import "../../../assets/template-item1/css/base";
    .hot {
        @include panel;
        .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
        h2 {
            button {
                float: right;
                @include btn;
                margin-top: 25px;
            }
            button:hover {
              border: none;
              background-color: #D9D9D9;
            }
        }
        .hot-wrapper {
            padding: 26px 0 20px 0;
        }
        .hot-content-left {
            width: 360px;
            float: left;

            .hot-content-top-list {
                padding-bottom: 17px;
                border-bottom: 1px solid #ccc;

                > div:nth-of-type(1) {
                    margin-bottom: 16px;
                }

                h3 {
                    font-size: 24px;
                    margin-bottom: 14px;

                    &:hover {
                        color: #417AEF;
                    }

                }

                p {
                    font-size: 14px;
                    color: #666;
                    line-height: 24px;
                    display: -webkit-box;
                    overflow: hidden;
                    -ms-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }

            .hot-content-bottom-list {
                li {
                    text-indent: 20px;
                    overflow: hidden;
                    -ms-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    position: relative;
                    font-size: 18px;
                    line-height: 36px;

                    &:after {
                        position: absolute;
                        left: 0;
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                        -moz-transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                        transform: translateY(-50%);
                        display: block;
                        content: '';
                        width: 6px;
                        height: 6px;
                        -webkit-border-radius: 3px;
                        -moz-border-radius: 3px;
                        border-radius: 3px;
                        background-color: #b9b9b9;
                    }
                }
            }
        }

        .hot-content-right {
            float: right;
            width: 644px;
            height: 422px;
        }
    }
</style>
